<template>
	<view class="help-container">
		<view class="nav-box p-20 w-full">
			<uni-nav-bar @clickLeft="$tab.back()" :fixed="false" color="#FFF" left-icon="left" backgroundColor="#FF561D"
				title="我的团队" statusBar="true" :border="false" />
			<view class="flex items-center justify-between">
				<view class="flex items-center">
					<image :src="user.avatar" class="image-56 round border-2-gray" mode="">
					</image>
					<text class="u-line-1 text-32 ml-20 text-FFF">用户：{{user.nickName}}</text>
				</view>
			</view>
			<view class="mt-32 w-full nav-info round-8 py-32" v-if="allTime">
				<view class="flex text-FFF justify-between items-center px-24">
					<view class="flex flex-col items-center">
						<text class="text1">直推人数</text>
						<text class="text2 mt-16">{{allTime.directUserNum }}</text>
					</view>
					<view class="flex flex-col items-center">
						<text class="text1">总人数</text>
						<text class="text2 mt-16">{{allTime.teamTotalNum }}</text>
					</view>
					<view class="flex flex-col items-center">
						<text class="text1">熵豆业绩</text>
						<text class="text2 mt-16">{{allTime.teamShangdouAmount }}</text>
					</view>
					<view class="flex  flex-col items-center">
						<text class="text1">今日熵豆业绩</text>
						<text class="text2 mt-16">{{allTime.teamShangdouAmountToday }}</text>
					</view>
				</view>
				<view class="flex text-FFF justify-between items-center px-24 mt-24" >
					<view class="flex flex-col items-center">
						<text class="text1">团队业绩</text>
						<text class="text2 mt-16">{{allTime.teamAmount }}</text>
					</view>
					<view class="flex  flex-col items-center">
						<text class="text1">今日销售总额</text>
						<text class="text2 mt-16">{{allTime.todayJoinUserNum }}</text>
					</view>
					
					<view class="flex  flex-col items-center" style="opacity: 0;">
						<text class="text1">今日销售售</text>
						<text class="text2 mt-16">{{allTime.todayJoinUserNum }}</text>
					</view>
					<view class="flex  flex-col items-center" style="opacity: 0;">
						<text class="text1">今日销售售</text>
						<text class="text2 mt-16">{{allTime.todayJoinUserNum }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="" :style="{
			height:navHeight + 'px'
		}">

		</view>

		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
			<view class=" px-20" v-for="(item,index) in list" :key="index">
				<view class="py-32">
					<view class="flex justify-between text-28 items-center">
						<view class="flex items-center">
							<image :src="item.avatar" class="image-48 round" mode="">
							</image>
							<text class="ml-20">{{item.nickName}}</text>
						</view>
						<view class="" v-if="handleLevel(item.levels)">
							熵豆等级：{{ handleLevel(item.levels) }}
						</view>
						<view class="">
							团队数：{{item.teamNum || 0}}人
						</view>
					</view>
					<view class="flex justify-between text-24 mt-16 items-center">
						<view class="">
							注册时间：{{item.createTime}}
						</view>
						<view class="">
							团队业绩：{{item.teamProfit || 0}}元
						</view>
					</view>
				</view>
				<u-line color="#F4F4F4"></u-line>
			</view>
		</s-pull-scroll>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: this.$store.getters.userInfo,
				allTime: null,
				navHeight: 0,
				list: []
			}
		},
		onLoad() {
			this.getData()
			this.refresh()
		},
		onReady() {
			
		},
		methods: {
			handleLevel(list){
				let obj = list.filter(item=>{
					return item.levelType == 4
				})
				return obj.levelName
			},
			async getData() {
				const res = await this.$Api.user.getTeamNum()
				console.log(res, '团队数据')
				this.allTime = res.data
				this.$nextTick(() => {
					let view = uni.createSelectorQuery().in(this).select(".nav-box");
					view.fields({
						size: true,
						scrollOffset: true
					}, data => {
						this.navHeight = data.height
					}).exec();
				})
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.user.getTeamList({
						pageNum: pullScroll.page,
						pageSize: 10,
					})

					this.list = this.list.concat(res.rows || []);
					if (res.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.text1 {
		font-size: 24rpx;
	}

	.text2 {
		font-size: 44rpx;
	}

	.nav-box {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background: #FF561D;

		.nav-info {
			background: rgba(255, 255, 255, 0.3);
		}
	}
</style>